<template>
  <el-button type="primary" @click="pData.show = true">新增配置项</el-button>
  <el-dialog v-model="pData.show" title="新增配置项" width="800px" center>
    <div class="c50">
      <el-row :gutter="30">
        <el-col :span="24">
          <p>数据类型 data_type ：</p>
          <div class="c51">
            <el-radio-group v-model="pData.form.data_type">
              <el-radio-button
                v-for="(v, i) in data_type"
                :key="v.label"
                :label="v.value"
                >{{ v.label }}</el-radio-button
              >
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="12">
          <p><span>*</span>配置名称：</p>
          <el-input
            v-model.trim="pData.form.title"
            clearable
            show-word-limit
            size="large"
            maxlength="10"
            placeholder="请输入"
          />
        </el-col>
        <el-col :span="12">
          <p><span>*</span>配置key_name：</p>
          <div class="flex">
            <el-input :value="data.value + '_'" size="large" disabled />
            <div style="width: 50px; text-align: center">+</div>
            <el-input
              v-model.trim="pData.form.key"
              clearable
              show-word-limit
              size="large"
              maxlength="32"
              placeholder="请输入"
            />
          </div>
        </el-col>
        <el-col>
          <div class="b1">配置信息预览</div>
          <div class="b2"><span>配置名称：</span>{{ formData.title }}</div>
          <div class="b2"><span>配置key_name：</span>{{ formData.key }}</div>
          <div class="b2"><span>配置默认值：</span>{{ formData.value }}</div>
          <!-- <el-input
            v-model.trim="pData.form.sort"
            clearable
            size="large"
            maxlength="32"
            placeholder="请输入"
            type="number"
          />
        </el-col>
        <el-col :span="12">
          <p>备注 notes (选填) ：</p>
          <el-input
            v-model.trim="pData.form.notes"
            clearable
            size="large"
            show-word-limit
            maxlength="32"
            placeholder="请输入"
          /> -->
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="pData.show = false" size="large">取消</el-button>
        <el-button type="primary" @click="addpData" size="large"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { post } from "@/common/http";
import { ElMessage } from "element-plus";

const emit = defineEmits(["reload"]);

interface IProps {
  data: any;
}
const props = defineProps<IProps>();

//数据类型
const data_type = [
  { label: "键值对", value: "keyVal" },
  { label: "文本", value: "text" },
  { label: "富文本", value: "editor" },
  { label: "图文", value: "img" },
  { label: "多个图文", value: "imgs" },
];

const pData = reactive({
  show: false,
  form: {
    title: "",
    data_type: "keyVal",
    key: "",
    sort: 0,
    arr: "n",
    notes: "",
  },
});

//添加配置，判断数据类型 给默认值
const formData = computed(() => {
  let form: any = JSON.parse(JSON.stringify(pData.form));
  switch (form.data_type) {
    case "imgs":
      form.arr = "y";
      form.value = [{ img: "", text: "",other: "" }];
      break;
    case "img":
      form.value = { img: "", text: "", other: "" };
      break;
    case "keyVal":
      form.arr = "y";
      form.value = [{ key: "", val: "" }];
      break;
    default:
      form.notes = "";
      form.value = "";
  }
  form.sort ? form.sort : 0;
  form.key = props.data.value + "_" + form.key;
  if (form.arr == "y") form.value = JSON.stringify(form.value);
  return form;
});

function addpData() {
  if (pData.form.title == "") return ElMessage.error("请输入配置项名称");
  if (pData.form.key == "") return ElMessage.error("请输入键名 key");

  post("api/Config/check_config_key", {
    key: props.data.value + "_" + pData.form.key,
  }).then((res) => {
    if (res.data?.id) {
      ElMessage({
        message: "键名key值" + pData.form.key + "已被占用，请更换",
        type: "error",
        duration: 8000,
      });
      pData.form.key = "";
    } else {
      //新增普通配置
      post("api/Config/add_config_list", {
        tabs_type: props.data.value,
        ...formData.value,
      }).then((res) => {
        pData.show = false;
        emit("reload");
      });
    }
  });
}
</script>

<style scoped lang="scss">
.c50 {
  padding: 0 10px;
  .b1 {
    padding: 0 10px;
    color: #000;
    margin-top: 20px;
    font-weight: bold;
    font-size: 15px;
  }
  .b2 {
    padding: 0 10px;
    margin-top: 10px;
    line-height: 20px;
    color: #222;
    span {
      color: #888;
    }
  }
}
.c50 p {
  line-height: 30px;
  margin-top: 10px;
  color: #333;
  span {
    color: #c00;
    display: inline-block;
    margin-right: 5px;
  }
}
.c51 {
  margin-bottom: 10px;
}
.c52 {
  margin-bottom: 5px;
  color: #999;
  padding: 0 1px;
}
</style>
